<!-- saved from url=(0067)https://img.atcoder.jp/ahc002/e5b2b399792299b5b35543c219e89601.html -->
<html lang="zh-cn">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
    .swal-icon--error {
      border-color: #f27474;
      -webkit-animation: animateErrorIcon .5s;
      animation: animateErrorIcon .5s
    }

    .swal-icon--error__x-mark {
      position: relative;
      display: block;
      -webkit-animation: animateXMark .5s;
      animation: animateXMark .5s
    }

    .swal-icon--error__line {
      position: absolute;
      height: 5px;
      width: 47px;
      background-color: #f27474;
      display: block;
      top: 37px;
      border-radius: 2px
    }

    .swal-icon--error__line--left {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      left: 17px
    }

    .swal-icon--error__line--right {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      right: 16px
    }

    @-webkit-keyframes animateErrorIcon {
      0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0
      }

      to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1
      }
    }

    @keyframes animateErrorIcon {
      0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0
      }

      to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1
      }
    }

    @-webkit-keyframes animateXMark {
      0% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0
      }

      50% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0
      }

      80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1
      }
    }

    @keyframes animateXMark {
      0% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0
      }

      50% {
        -webkit-transform: scale(.4);
        transform: scale(.4);
        margin-top: 26px;
        opacity: 0
      }

      80% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        margin-top: -6px
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1);
        margin-top: 0;
        opacity: 1
      }
    }

    .swal-icon--warning {
      border-color: #f8bb86;
      -webkit-animation: pulseWarning .75s infinite alternate;
      animation: pulseWarning .75s infinite alternate
    }

    .swal-icon--warning__body {
      width: 5px;
      height: 47px;
      top: 10px;
      border-radius: 2px;
      margin-left: -2px
    }

    .swal-icon--warning__body,
    .swal-icon--warning__dot {
      position: absolute;
      left: 50%;
      background-color: #f8bb86
    }

    .swal-icon--warning__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-left: -4px;
      bottom: -11px
    }

    @-webkit-keyframes pulseWarning {
      0% {
        border-color: #f8d486
      }

      to {
        border-color: #f8bb86
      }
    }

    @keyframes pulseWarning {
      0% {
        border-color: #f8d486
      }

      to {
        border-color: #f8bb86
      }
    }

    .swal-icon--success {
      border-color: #a5dc86
    }

    .swal-icon--success:after,
    .swal-icon--success:before {
      content: "";
      border-radius: 50%;
      position: absolute;
      width: 60px;
      height: 120px;
      background: #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg)
    }

    .swal-icon--success:before {
      border-radius: 120px 0 0 120px;
      top: -7px;
      left: -33px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transform-origin: 60px 60px;
      transform-origin: 60px 60px
    }

    .swal-icon--success:after {
      border-radius: 0 120px 120px 0;
      top: -11px;
      left: 30px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transform-origin: 0 60px;
      transform-origin: 0 60px;
      -webkit-animation: rotatePlaceholder 4.25s ease-in;
      animation: rotatePlaceholder 4.25s ease-in
    }

    .swal-icon--success__ring {
      width: 80px;
      height: 80px;
      border: 4px solid hsla(98, 55%, 69%, .2);
      border-radius: 50%;
      box-sizing: content-box;
      position: absolute;
      left: -4px;
      top: -4px;
      z-index: 2
    }

    .swal-icon--success__hide-corners {
      width: 5px;
      height: 90px;
      background-color: #fff;
      padding: 1px;
      position: absolute;
      left: 28px;
      top: 8px;
      z-index: 1;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg)
    }

    .swal-icon--success__line {
      height: 5px;
      background-color: #a5dc86;
      display: block;
      border-radius: 2px;
      position: absolute;
      z-index: 2
    }

    .swal-icon--success__line--tip {
      width: 25px;
      left: 14px;
      top: 46px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-animation: animateSuccessTip .75s;
      animation: animateSuccessTip .75s
    }

    .swal-icon--success__line--long {
      width: 47px;
      right: 8px;
      top: 38px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: animateSuccessLong .75s;
      animation: animateSuccessLong .75s
    }

    @-webkit-keyframes rotatePlaceholder {
      0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
      }

      5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
      }

      12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg)
      }

      to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg)
      }
    }

    @keyframes rotatePlaceholder {
      0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
      }

      5% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
      }

      12% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg)
      }

      to {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg)
      }
    }

    @-webkit-keyframes animateSuccessTip {
      0% {
        width: 0;
        left: 1px;
        top: 19px
      }

      54% {
        width: 0;
        left: 1px;
        top: 19px
      }

      70% {
        width: 50px;
        left: -8px;
        top: 37px
      }

      84% {
        width: 17px;
        left: 21px;
        top: 48px
      }

      to {
        width: 25px;
        left: 14px;
        top: 45px
      }
    }

    @keyframes animateSuccessTip {
      0% {
        width: 0;
        left: 1px;
        top: 19px
      }

      54% {
        width: 0;
        left: 1px;
        top: 19px
      }

      70% {
        width: 50px;
        left: -8px;
        top: 37px
      }

      84% {
        width: 17px;
        left: 21px;
        top: 48px
      }

      to {
        width: 25px;
        left: 14px;
        top: 45px
      }
    }

    @-webkit-keyframes animateSuccessLong {
      0% {
        width: 0;
        right: 46px;
        top: 54px
      }

      65% {
        width: 0;
        right: 46px;
        top: 54px
      }

      84% {
        width: 55px;
        right: 0;
        top: 35px
      }

      to {
        width: 47px;
        right: 8px;
        top: 38px
      }
    }

    @keyframes animateSuccessLong {
      0% {
        width: 0;
        right: 46px;
        top: 54px
      }

      65% {
        width: 0;
        right: 46px;
        top: 54px
      }

      84% {
        width: 55px;
        right: 0;
        top: 35px
      }

      to {
        width: 47px;
        right: 8px;
        top: 38px
      }
    }

    .swal-icon--info {
      border-color: #c9dae1
    }

    .swal-icon--info:before {
      width: 5px;
      height: 29px;
      bottom: 17px;
      border-radius: 2px;
      margin-left: -2px
    }

    .swal-icon--info:after,
    .swal-icon--info:before {
      content: "";
      position: absolute;
      left: 50%;
      background-color: #c9dae1
    }

    .swal-icon--info:after {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-left: -3px;
      top: 19px
    }

    .swal-icon {
      width: 80px;
      height: 80px;
      border-width: 4px;
      border-style: solid;
      border-radius: 50%;
      padding: 0;
      position: relative;
      box-sizing: content-box;
      margin: 20px auto
    }

    .swal-icon:first-child {
      margin-top: 32px
    }

    .swal-icon--custom {
      width: auto;
      height: auto;
      max-width: 100%;
      border: none;
      border-radius: 0
    }

    .swal-icon img {
      max-width: 100%;
      max-height: 100%
    }

    .swal-title {
      color: rgba(0, 0, 0, .65);
      font-weight: 600;
      text-transform: none;
      position: relative;
      display: block;
      padding: 13px 16px;
      font-size: 27px;
      line-height: normal;
      text-align: center;
      margin-bottom: 0
    }

    .swal-title:first-child {
      margin-top: 26px
    }

    .swal-title:not(:first-child) {
      padding-bottom: 0
    }

    .swal-title:not(:last-child) {
      margin-bottom: 13px
    }

    .swal-text {
      font-size: 16px;
      position: relative;
      float: none;
      line-height: normal;
      vertical-align: top;
      text-align: left;
      display: inline-block;
      margin: 0;
      padding: 0 10px;
      font-weight: 400;
      color: rgba(0, 0, 0, .64);
      max-width: calc(100% - 20px);
      overflow-wrap: break-word;
      box-sizing: border-box
    }

    .swal-text:first-child {
      margin-top: 45px
    }

    .swal-text:last-child {
      margin-bottom: 45px
    }

    .swal-footer {
      text-align: right;
      padding-top: 13px;
      margin-top: 13px;
      padding: 13px 16px;
      border-radius: inherit;
      border-top-left-radius: 0;
      border-top-right-radius: 0
    }

    .swal-button-container {
      margin: 5px;
      display: inline-block;
      position: relative
    }

    .swal-button {
      background-color: #7cd1f9;
      color: #fff;
      border: none;
      box-shadow: none;
      border-radius: 5px;
      font-weight: 600;
      font-size: 14px;
      padding: 10px 24px;
      margin: 0;
      cursor: pointer
    }

    .swal-button:not([disabled]):hover {
      background-color: #78cbf2
    }

    .swal-button:active {
      background-color: #70bce0
    }

    .swal-button:focus {
      outline: none;
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(43, 114, 165, .29)
    }

    .swal-button[disabled] {
      opacity: .5;
      cursor: default
    }

    .swal-button::-moz-focus-inner {
      border: 0
    }

    .swal-button--cancel {
      color: #555;
      background-color: #efefef
    }

    .swal-button--cancel:not([disabled]):hover {
      background-color: #e8e8e8
    }

    .swal-button--cancel:active {
      background-color: #d7d7d7
    }

    .swal-button--cancel:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(116, 136, 150, .29)
    }

    .swal-button--danger {
      background-color: #e64942
    }

    .swal-button--danger:not([disabled]):hover {
      background-color: #df4740
    }

    .swal-button--danger:active {
      background-color: #cf423b
    }

    .swal-button--danger:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(165, 43, 43, .29)
    }

    .swal-content {
      padding: 0 20px;
      margin-top: 20px;
      font-size: medium
    }

    .swal-content:last-child {
      margin-bottom: 20px
    }

    .swal-content__input,
    .swal-content__textarea {
      -webkit-appearance: none;
      background-color: #fff;
      border: none;
      font-size: 14px;
      display: block;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid rgba(0, 0, 0, .14);
      padding: 10px 13px;
      border-radius: 2px;
      transition: border-color .2s
    }

    .swal-content__input:focus,
    .swal-content__textarea:focus {
      outline: none;
      border-color: #6db8ff
    }

    .swal-content__textarea {
      resize: vertical
    }

    .swal-button--loading {
      color: transparent
    }

    .swal-button--loading~.swal-button__loader {
      opacity: 1
    }

    .swal-button__loader {
      position: absolute;
      height: auto;
      width: 43px;
      z-index: 2;
      left: 50%;
      top: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      pointer-events: none;
      opacity: 0
    }

    .swal-button__loader div {
      display: inline-block;
      float: none;
      vertical-align: baseline;
      width: 9px;
      height: 9px;
      padding: 0;
      border: none;
      margin: 2px;
      opacity: .4;
      border-radius: 7px;
      background-color: hsla(0, 0%, 100%, .9);
      transition: background .2s;
      -webkit-animation: swal-loading-anim 1s infinite;
      animation: swal-loading-anim 1s infinite
    }

    .swal-button__loader div:nth-child(3n+2) {
      -webkit-animation-delay: .15s;
      animation-delay: .15s
    }

    .swal-button__loader div:nth-child(3n+3) {
      -webkit-animation-delay: .3s;
      animation-delay: .3s
    }

    @-webkit-keyframes swal-loading-anim {
      0% {
        opacity: .4
      }

      20% {
        opacity: .4
      }

      50% {
        opacity: 1
      }

      to {
        opacity: .4
      }
    }

    @keyframes swal-loading-anim {
      0% {
        opacity: .4
      }

      20% {
        opacity: .4
      }

      50% {
        opacity: 1
      }

      to {
        opacity: .4
      }
    }

    .swal-overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0;
      overflow-y: auto;
      background-color: rgba(0, 0, 0, .4);
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transition: opacity .3s
    }

    .swal-overlay:before {
      content: " ";
      display: inline-block;
      vertical-align: middle;
      height: 100%
    }

    .swal-overlay--show-modal {
      opacity: 1;
      pointer-events: auto
    }

    .swal-overlay--show-modal .swal-modal {
      opacity: 1;
      pointer-events: auto;
      box-sizing: border-box;
      -webkit-animation: showSweetAlert .3s;
      animation: showSweetAlert .3s;
      will-change: transform
    }

    .swal-modal {
      width: 478px;
      opacity: 0;
      pointer-events: none;
      background-color: #fff;
      text-align: center;
      border-radius: 5px;
      position: static;
      margin: 20px auto;
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      z-index: 10001;
      transition: opacity .2s, -webkit-transform .3s;
      transition: transform .3s, opacity .2s;
      transition: transform .3s, opacity .2s, -webkit-transform .3s
    }

    @media (max-width:500px) {
      .swal-modal {
        width: calc(100% - 20px)
      }
    }

    @-webkit-keyframes showSweetAlert {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }

      1% {
        -webkit-transform: scale(.5);
        transform: scale(.5)
      }

      45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
      }

      80% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    @keyframes showSweetAlert {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }

      1% {
        -webkit-transform: scale(.5);
        transform: scale(.5)
      }

      45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
      }

      80% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
      }

      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }
  </style>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TesutoHime · Visualizer</title>
  <link href="https://cdn2.yukisaki.io:51391/oj_cdn/bootstrap/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn2.yukisaki.io:51391/oj_cdn/argon/css/style.css" rel="stylesheet">

  <title>Visualizer</title>
</head>

<body class="bg-secondary">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary py-2 mb-3">
    <div class="container">
      <a class="navbar-brand" href="https://oj.yukisaki.cn/">ACM Class OnlineJudge 2020</a>
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse" id="navbarContent">
        <div class="navbar-collapse-header">
          <div class="row">
            <div class="col-10 collapse-brand">
              <a href="/">ACM Class OnlineJudge 2020</a>
            </div>
            <div class="col-2 collapse-close">
              <button type="button" class="navbar-toggler collapsed" data-toggle="collapse"
                data-target="#navbarContent">
                <span></span>
                <span></span>
              </button>
            </div>
          </div>
        </div>
        <ul class="navbar-nav" style="line-height: 1;">
          <li class="nav-item"><a href="https://oj.yukisaki.cn/problems" class="nav-link">题库</a></li>
          <li class="nav-item"><a href="https://oj.yukisaki.cn/contest" class="nav-link">比赛</a></li>
          <li class="nav-item"><a href="https://oj.yukisaki.cn/homework" class="nav-link">作业</a></li>
          <li class="nav-item"><a href="https://oj.yukisaki.cn/status" class="nav-link">评测状态</a></li>
          <li class="nav-item"><a href="https://oj.yukisaki.cn/about" class="nav-link">关于</a></li>

        </ul>
      </div>
    </div>
  </nav>
  <main class="container">
    <div class="jumbotron bg-white">
      <h1>TesutoHime · Visualizer</h1>
      这里是一个简单的，用于可视化《沼泽漫步》这道题目的模拟器。你可以在这里测试你的程序策略，也可以用人类智慧挑战最优的解法。
      <br>
      <br>
      <h3>使用方法</h3>
      你可以通过输入 Seed 并点击 GENERATE 来生成一组测试数据到 Input 中。
      <br>
      你可以通过点击 VISUALIZE 将当前的 Input 和 Output 可视化到页面的下方，并点击 SAVE 按钮来保存现在的运行结果。
      <br>
      开启手动模式的时候，你可以使用键盘按键 <kbd>←</kbd> <kbd>↑</kbd>  <kbd>→</kbd> <kbd>↓</kbd> 来控制当前的移动反向。
      如果和当前移动方向相反，将会后退到上一步。
      

      
      <hr class="my-4">
      <div class="row">
        <div class="col">
          <input type="number" id="seed" placeholder="Seed" style="font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;" class="form-control" value="">
        </div>
        <div class="col">
          <input type="text" id="name" placeholder="Your name here" style="font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;" class="form-control" value="">
        </div>
      </div>

      
      
      <br>

      <button type="button" value="Generate" onclick="generate()" class="btn btn-primary">Generate</button>
      <button type="button" value="Visualize" onclick="visualize()" class="btn btn-warning">Visualize</button>
      <button type="button" value="Save" onclick="save()" class="btn btn-info">Save</button>
      <button class="btn btn-default" onclick="manual()">
        <input type="checkbox" id="manual" autocomplete="off"> Manual
      </button>
      
      <hr class="my-4">
      <p>
        
      </p>
      <p>
        Input:<br>
        <textarea id="input" class="form-control" rows="3" style="font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;" data-gramm_editor="false"></textarea>
      </p>
      <p>
        Output:
        <br>
        <textarea id="output" class="form-control" rows="3" style="font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;" data-gramm_editor="false"></textarea>
      </p>
      
      <hr class="my-4">
      
      <div id="result"></div>


    </div>
    <!-- 网页内容写在这里面 -->
    
    

  </main>
  <footer class="footer">
    <div class="container text-center">
        <p class="mb-0">
            ACM Class OnlineJudge © 2020 Powered By
            <a href="https://github.com/cmd2001/Open-TesutoHime/" target="_blank"> TesutoHime</a>
        </p>
        <p>
            备案号：<a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">沪ICP备2020031263号-1</a>
        </p>
    </div>
</footer>
</body>
<script src="https://cdn2.yukisaki.io:51391/oj_cdn/jquery/jquery.min.js"></script>
<script src="https://cdn2.yukisaki.io:51391/oj_cdn/bootstrap/popper.min.js"></script>
<script src="https://cdn2.yukisaki.io:51391/oj_cdn/bootstrap/bootstrap.min.js"></script>
<script src="https://cdn2.yukisaki.io:51391/oj_cdn/jquery/jquery.form.js"></script>
<script src="https://cdn2.yukisaki.io:51391/oj_cdn/sweetalert/sweetalert.min.js"></script>
<script src="https://unpkg.com/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>
<script src="src.js"></script>
<script src="key.js"></script>
<script>
  const {
    gen,
    vis
  } = wasm_bindgen;
  async function run() {
    await wasm_bindgen('src.wasm');
  }
  run();

  function generate() {
    const seed = document.getElementById("seed").value;
    const input = gen(seed);
    document.getElementById("input").value = input;
  }

  function visualize() {
    const input = document.getElementById("input").value;
    const output = document.getElementById("output").value;
    try {
      document.getElementById("result").innerHTML = vis(input, output);
    } catch (error) {
      document.getElementById("result").innerHTML = "<div class=\"alert alert-dark\" role=\"alert\">Invalid Input or Output</div>";
    }
  }

  function save() {
    swal({
      title: "保存你的方案",
      text: "下载到本地或者上传到我们的服务器，用于赛后的交流分享",
      icon: "info",
      buttons: {
        cancel: "取消", 
        upload: {
          text: "上传",
          value: "upload",
          //closeModal: false,
        },
        download: {
          text: "下载",
          value: "download",
          //closeModal: false,
        },
      },
    }).then((value) => {
      console.log(value);
      switch(value) {
        case "download":
          download();
          break;
        case "upload":
          upload();
          //setTimeout(() => {}, 5000);
          //swal("ok");
          break;
        default:
          break;
      }
    });
  }

  function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
  }

  function upload(type = 'png') {
    var author = document.getElementById("name").value;
    if (author == "" || author == null) {
      swal("Oops", "留下您的大名吧～", "error");
      document.getElementById("name").focus();
      return;
    }
    let itemList = document.getElementsByTagName('svg') 
    if (itemList.length < 1) {
      swal("Oops", "还没有生成可以保存的图像～", "error");
    } else {
      var svg = itemList[0];
      var svgXml = svg.outerHTML;
      //console.log(svgXml)
      var image = new Image();
      image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

      var text_height = 100;
      var pad = 20;

      var canvas = document.createElement('canvas');  //准备空画布
      canvas.width = pad * 2 + parseInt(svg.getAttribute('width'));
      canvas.height = pad * 2 + text_height + parseInt(svg.getAttribute('height'));
      //console.log(canvas.width, canvas.height);

      let context = canvas.getContext('2d')
      context.fillStyle = '#fff'
      context.fillRect(0, 0, 10000, 10000)
      image.onload = function () {
        context.drawImage(image, pad, pad + text_height);
        context.font = "30px Comic Sans MS";
        context.fillStyle = "black";
        context.textAlign = "center";
        context.fillText("Seed: " + document.getElementById("seed").value +  "        Author: " + document.getElementById("name").value,
          canvas.width/2, (text_height));
        //console.log(canvas);
        var cos = get_cos();
        canvas.toBlob(function(blob) {
          //console.log(blob);
          var date = new Date();
          var time = dateFormat("YYYY-mm-dd HH:MM", date)
          
          var filename = author + "@" + time + "." + type;
          var path = "PPCA2021/T1263/"
          cos.putObject({
            Bucket: 'anoxiacxy-1256564208', /* 必须 */
            Region: 'ap-nanjing',     /* 存储桶所在地域，必须字段 */
            Key: path + filename,              /* 必须 */
            StorageClass: 'STANDARD',
            Body: blob, // 上传文件对象
            onProgress: function(progressData) {
                console.log(JSON.stringify(progressData));
                if (progressData.percent == 1) {
                  swal("Success", "上传成功！文件名：" + filename, "success")
                }
            }
          }, function(err, data) {
            console.log(err || data);
            swal("Oops", err, "error");
          });
        });
      }
    }
    //return true;
    
  }

  function download(type = 'png') {
    var author = document.getElementById("name").value;
    if (author == "" || author == null) {
      swal("Oops", "留下您的大名吧～", "error");
      document.getElementById("name").focus();
      return;
    }
    let itemList = document.getElementsByTagName('svg') 
    if (itemList.length < 1) {
      swal("Oops", "还没有生成可以保存的图像～", "error");
    } else {
      var svg = itemList[0];
      var svgXml = svg.outerHTML;
      //console.log(svgXml)
      var image = new Image();
      image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

      var text_height = 50;
      var pad = 20;

      var canvas = document.createElement('canvas');  //准备空画布
      canvas.width = pad * 2 + parseInt(svg.getAttribute('width'));
      canvas.height = pad * 2 + text_height + parseInt(svg.getAttribute('height'));
      //console.log(canvas.width, canvas.height);

      let context = canvas.getContext('2d')
      context.fillStyle = '#fff'
      context.fillRect(0, 0, 10000, 10000)
      image.onload = function () {
        context.drawImage(image, pad, pad + text_height)
        context.font = "30px Comic Sans MS";
        context.fillStyle = "black";
        context.textAlign = "center";
        context.fillText("Seed: " + document.getElementById("seed").value +  "        Author: " + document.getElementById("name").value, 
          canvas.width/2, (text_height));
        let a = document.createElement('a')
        a.download = `result.${type}`
        a.href = canvas.toDataURL(`image/${type}`)
        a.click()
      }
    }
  }

  function manual() {
    if (document.getElementById("manual").checked)
      document.getElementById("manual").checked = false;
    else
      document.getElementById("manual").checked = true;
  }

  document.body.addEventListener('keydown',
    event => {
      if (document.getElementById("manual").checked) {
        const val = document.getElementById("output").value.trim();
        if (event.key == 'ArrowLeft') {
          if (val.endsWith('R')) {
            document.getElementById("output").value = val.slice(0, -1);
          } else {
            document.getElementById("output").value = val + 'L';
          }
          visualize();
          event.preventDefault();
        } else if (event.key == 'ArrowRight') {
          if (val.endsWith('L')) {
            document.getElementById("output").value = val.slice(0, -1);
          } else {
            document.getElementById("output").value = val + 'R';
          }
          visualize();
          event.preventDefault();
        } else if (event.key == 'ArrowUp') {
          if (val.endsWith('D')) {
            document.getElementById("output").value = val.slice(0, -1);
          } else {
            document.getElementById("output").value = val + 'U';
          }
          visualize();
          event.preventDefault();
        } else if (event.key == 'ArrowDown') {
          if (val.endsWith('U')) {
            document.getElementById("output").value = val.slice(0, -1);
          } else {
            document.getElementById("output").value = val + 'D';
          }
          visualize();
          event.preventDefault();
        }
      }
    }
  )
</script>

</html>